<template>
	<view class="container">
		<!-- 全部宝贝 -->
		<view class="box1">
			<waterfall :list="goodsList" :space="10" :column="2"></waterfall>
			<uni-load-more :status="status"></uni-load-more>
		</view>
	</view>
</template>

<script>

import waterfall from '@/pages/aduit/components/kcy-waterfall/waterfall.vue';
import uniLoadMore from '@/pages/aduit/components/uni-load-more/uni-load-more.vue';
import ajax from '@/common/request.js';
var that = '';
export default {
	components: {
		waterfall,
		uniLoadMore
	},
	data() {
		return {
			marchantId: '',
			shopId: '',
			goodsList: [],
			couponList: [],
			mid: '',
			type: 1, //1时 查询综合 按时间降序排序， 为2时 查询销量降序排序， 为3时 查询价格最低升序排序，为4时查询价格最高降序排序，为5时查询店铺宝贝分类传入cateId参数
			pageNo: 1,
			status: 'loading',
			pageAll: 1,
			shopObj: {},
			cateid: '', //分类id
			cateArr: [
				{
					catename: ''
				}
			], //分类信息
			footType: 1, //1为全部，2为分类
			topType: 1, //1为宝贝，2为领券
		};
	},
	onLoad(e) {
		that = this;
		that.shopId = e.shopId;
		if (e.type) {
			that.topType = e.type;
		}
	},
	onShow() {
		that.mid = '';
		//查询商品数据
		that.loadData();
		//查询分类数据
		that.SelectBabyCate();
	},
	methods: {
		//商户简介
		url(url) {
			uni.navigateTo({
				url: url
			});
		},
		//收藏
		coll(isColl) {},
		//店铺信息
		loadData() {
			ajax({
				url: '/store/searchStoreById',
				data: {
					shopId: that.shopId,
					mid: that.mid
				},
				success(d) {
					that.shopObj = d;
					that.marchantId = d.marchantId;
					that.searchPro();
				}
			});
		},
		//查询宝贝分类
		SelectBabyCate() {
			ajax({
				url: '/shopProductCate/getSelectBabyCate',
				method: 'GET',
				data: {
					shopId: that.shopId
				},
				success(d) {
					that.cateArr = d;
					that.swarchCoupon();
				}
			});
		},
		//查询优惠券
		swarchCoupon() {
			ajax({
				url: '/store/searchStoreGrantCoupon',
				data: {
					shopId: that.shopId,
					mid: that.mid
				},
				success(d) {
					if (d) {
						d.forEach(item => {
							item.begintime = that.$api.format(item.begintime);
							item.endtime = that.$api.format(item.endtime);
						});
						that.couponList = d;
					}
				}
			});
		},
		//领取优惠券
		create(item, index) {
			if (item.isReceive > 0) {
				that.$api.msg('当前优惠券已领取');
				return;
			}
			ajax({
				url: '/marchantShopCoupon/create',
				data: {
					deductionid: item.deductionid,
					mid: that.mid
				},
				success(d) {
					that.couponList[index].isReceive = 1;
					that.$api.msg('领取成功');
				}
			});
		},
		//初始化
		init() {
			that.pageNo = 1;
			that.pageAll = 1;
			that.goodsList = [];
		},
		//宝贝和优惠券的切换
		topChange(index) {
			that.topType = index;
		},
		//分类列表
		cateItem(item) {
			uni.navigateTo({
				url: `/pages/product/sellerProList?shopId=${that.shopId}&cateid=${item.cateid}`
			});
		},
		tel() {
			ajax({
				url: '/myMarchantShop/getSelectCustomerService',
				method: 'GET',
				data: {
					shopId: that.shopId
				},
				success(d) {
					uni.makePhoneCall({
						phoneNumber: d.servicephone //仅为示例
					});
				}
			});
		},
		cusUrl() {
			if (that.mid) {
				uni.navigateTo({
					url: '/pages/web/webView?url=http://www.hnlxyj.com/wx/cs.html?mid=' + that.mid
				});
			} else {
				that.$api.msg('当前您还未登录');
			}
		},
		//商品排序的切换
		typeChange(index) {
			if (index == 3 && that.type == 3) {
				that.type = 4;
			} else {
				that.type = index;
			}
			that.init();
			that.searchPro();
		},
		//底部的切换
		footTypeChange(index) {
			that.footType = index;
		},
		//查询商品
		searchPro() {
			if (that.pageNo <= that.pageAll) {
				ajax({
					url: '/myMarchantShop/getselectShopBaBy',
					method: 'GET',
					data: {
						shopId: that.shopId,
						type: that.type,
						PageNo: that.pageNo
					},
					success(d) {
						that.pageAll = d.totalPage;
						that.pageNo = that.pageNo * 1 + 1;
						that.goodsList = that.goodsList.concat(d.lists);
						if (that.pageNo > that.pageAll) {
							that.status = 'noMore';
						}
					}
				});
			}
		},
		searchText() {
			that.$api.searchUrl(5, that.cateid, that.shopId);
		}
	},
	//上拉加载
	onReachBottom() {
		that.loadData();
	},
	onNavigationBarSearchInputClicked: async function(e) {
		that.$api.searchUrl(5, that.cateid, that.shopId);
	}
};
</script>

<style lang="scss" scoped>
/* #ifdef MP */
.mp-search-box {
	line-height: 80rpx;
	background: #fff;
	width: 100%;
	padding: 0 30rpx;
	position: fixed;
	top: 0;
	z-index: 1000;
	text-align: center;
	.ser-input {
		display: inline-block;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		font-size: 28rpx;
		color: $font-color-base;
		border-radius: 32rpx;
		width: 532rpx;
		vertical-align: middle;
		margin-left: 30rpx;
		background: rgba(231, 231, 231, 0.7);
	}
	text {
		float: right;
		font-size: 26rpx;
	}
}
page {
	.navTop {
		padding-top: 110rpx;
	}
	.box2 {
		padding-top: 110rpx;
	}
}
/* #endif */
page {
	background: #f2f2f2;
}

.r {
	float: right;
}

.navTop {
	background: #fff;
	padding: 30rpx 30rpx 0 30rpx;

	.top {
		.title {
			font-size: 32rpx;
		}

		> view {
			display: inline-block;
			font-size: 22rpx;
		}
	}

	.r {
		margin-top: 16rpx;
	}

	.score {
		background: #f0f0f0;
		border-radius: 12rpx;
		padding: 0 10rpx;
		line-height: 32rpx;
		margin-top: 10rpx;
		display: inline-block;
		margin-right: 10rpx;

		text {
			vertical-align: middle;
		}

		.uni-rate {
			display: inline-block;
			vertical-align: middle;
		}
	}

	.nav {
		margin-top: 30rpx;
		margin-bottom: 2px;
		padding-bottom: 10rpx;

		> view {
			display: inline-block;
			margin-right: 35rpx;
			line-height: 40rpx;
			color: #666;
			border-bottom: 2px solid transparent;
			font-size: 28rpx;

			&.active {
				color: #333;
				border-bottom-color: #333;
			}
		}
	}
}

.box1 {
	padding-bottom: 110rpx;

	.nav {
		line-height: 80rpx;
		background: #fff;
		padding: 0 30rpx;

		> view {
			display: inline-block;
			align-items: center;
			justify-content: center;
			margin-right: 30rpx;
			font-size: 28rpx;

			.active {
				color: $font-color-theme;
			}
		}
	}
}

.btn {
	display: inline-block;
	font-size: 24rpx;
	width: 129rpx;
	height: 54rpx;
	text-align: center;
	line-height: 54rpx;
	background: #eee;
	border-radius: 30rpx;
	color: $font-color-light;

	&.active {
		color: #fff;
		background: #fca434;
	}
}

.p-box {
	display: flex;
	flex-direction: column;
	position: relative;
	top: 26rpx;

	.yticon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30rpx;
		height: 14rpx;
		line-height: 1;
		margin-left: 4rpx;
		font-size: 26rpx;
		color: #888;

		&.active {
			color: $font-color-theme;
		}
	}

	.xia {
		transform: scaleY(-1);
	}
}

.foot {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #fff;
	height: 103rpx;
	display: flex;
	padding-top: 12rpx;
	font-size: 22rpx;
	color: $font-color-light;

	> view {
		flex: 1;
		text-align: center;

		&.active {
			color: $font-color-theme;
		}
	}

	.big {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	image {
		margin: 0 auto;
		width: 40rpx;
		height: 40rpx;
		display: block;
		margin-bottom: 10rpx;
	}
}

.box2 {
	padding: 0 30rpx;
	padding-top: 20rpx;
	padding-bottom: 110rpx;

	view {
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		padding: 0 30rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}
}

.box3 {
	text-align: center;
	padding-bottom: 120rpx;
	.box {
		font-size: 0;
		margin-top: 20rpx;
	}

	.box > view {
		vertical-align: text-top;
		display: inline-block;
		height: 176rpx;
		padding: 26rpx 16rpx;
		background: #fff6f2;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.left {
		width: 510rpx;

		image {
			width: 120rpx;
			height: 120rpx;
		}
	}

	.link {
		width: 1px;
		height: 146rpx;
		margin-top: -10rpx;
		margin-right: -16rpx;
		border-left: 1px dashed #ffb392;
	}

	.left > view {
		display: inline-block;
		vertical-align: text-top;
		color: #666;
		text-align: left;
	}

	.top {
		font-size: 22rpx;
		color: $font-color-theme;
		margin-top: -10rpx;
	}

	.top .span {
		font-size: 40rpx;
	}

	.left .title {
		display: inline-block;
		vertical-align: middle;
		color: $font-color-theme;
		font-size: 48rpx;
		width: 120rpx;
		line-height: 120rpx;
		margin-right: 10rpx;
		vertical-align: text-top;
	}

	.left view:nth-child(2) {
		width: 340rpx;
	}

	.box .right {
		width: 160rpx;
		text-align: center;
		line-height: 150rpx;
	}

	.time {
		letter-spacing: -1px;
	}

	.top.black {
		color: #333;
	}

	.tit .btn,
	.right .span {
		margin-right: 20rpx;
		height: 48rpx;
		line-height: 48rpx;
		width: 110rpx;
		text-align: center;
		border-radius: 48rpx;
		font-size: 24rpx;
		color: $font-color-theme;
		border: 1px solid $font-color-theme;
		display: inline-block;
	}
}

.cus {
	position: fixed;
	background: #fff;
	color: #333;
	font-size: 28rpx;
	bottom: 120rpx;
	right: 0;
	border-radius: 10rpx;
	z-index: 1000000;

	.dorder {
		padding: 0;
		width: 0;
		height: 0;
		position: absolute;
		left: 60rpx;
		bottom: -40rpx;
		border: 20rpx solid;
		border-color: #fff transparent transparent transparent;
	}

	.list {
		padding: 10rpx 30rpx;
		border-bottom: 1px solid #eee;
	}
}
</style>
